<html>
<head>
<style>
</style>
<script src=http://api.feedgraph.com/js/feedgraph.js></script>
<script src=temper.js></script>
<script> 

	
var data = {};

/* templates */
temper.include("templates/audio-player.html");
var track = temper.script("track-list-item");
var queue = temper.script("queue-item");

function playSong(uri) {

	feedgraph.postobj("/jukebox/SomeBar/song-queue", data[uri]);
}

function skipSong(uri) {

	var skip = JSON.parse(JSON.stringify(data[uri]));
	skip.Method = "SKIP";

	feedgraph.postobj("/jukebox/SomeBar/song-queue", skip);
}

function addSong(obj) {

	track.append("track-list", obj);

	data[obj.URI] = obj;
}

function addQSong(entry) {

	if (!entry.Obj.Method) {
		queue.append("queue", entry.Obj);
	}
}

function init() {

	feedgraph.watch("/jukebox/SomeBar/song-queue.json", addQSong, true);

	addSong({"Title": "Float On", "Artist": "Modest Mouse", "URI": "http://ryannedolantest.s3.amazonaws.com/float-on.mp3", "Type":"audio/mp3"});
	addSong({"Title": "A Punch Up At A Wedding", "Artist": "Radiohead", "URI": "http://ryannedolantest.s3.amazonaws.com/a-punch-up-at-a-wedding.mp3", "Type":"audio/mp3"});
	addSong({"Title": "Lover I Don't Have To Love", "Artist": "Bright Eyes", "URI": "http://ryannedolantest.s3.amazonaws.com/lover-i-dont-have-to-love.mp3", "Type":"audio/mp3"});
	
}

</script>

</head>
<body onload=init()>

	<h1>Some Bar</h1>

	<h2>queue</h2>

	<ol id=queue></ol>

	<h2>track list</h2>

	<ul id=track-list></ul>
<body>
</html>
